<template>
    <div class="note">
        <van-nav-bar
                title="精选笔记"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <scroll ref="scroll"
                class="note-content"
                show-action
                shape="round"
                :data="notes"
                :pullup="true"
                @scrollToEnd="scrollToEnd"
                :listenScroll="true"
                :isSetPlayerStatus="true"
                :probeType="2"
        >
            <div class="recommend-list">
                <div v-for="item in notes">
                    <a :href="item.to_url">
                        <div class="ctime">{{item.create_time}}</div>
                        <div class="article-item">
                            <div>
                                <img class="image" :src="item.cover">
                                <div class="title">{{item.title}}</div>
                                <div class="intro">{{item.desc}}</div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </scroll>
    </div>
</template>

<script>
    import Scroll from "@/components/scroll/scroll";
    import Vue from 'vue';
    import {
        Notify
        , NavBar
    } from 'vant';

    Vue.use(NavBar);

    const ERR_OK = 1;
    export default {
        name: "note",
        data() {
            return {
                page: 1,
                notes: []
            }
        },
        created() {
            this.getNotes();
            this.$store.commit("setPlayerStatus", false);
            this.$store.commit("setTabbarStatus", false);
        },
        methods: {
            // 分页
            scrollToEnd() {
                this.page++;
                this.getNotes();
            },
            getNotes() {
                var url = "/resource/getNotes?page=" + this.page;
                this.$http.get(url).then((response) => {
                    var rs = response.data;
                    if (rs.data.length <= 0) {
                        Notify({
                            message: '没有内容了',
                            duration: 800,
                            background: '#ffcd32',
                        });
                        return;
                    }
                    if (rs.code === ERR_OK) {
                        this.notes = this.notes.concat(rs.data);
                    }
                })
            },
            onClickLeft() {
                this.$router.push('/my');
            },
        },
        components: {
            Scroll,
        }
    }
</script>

<style scoped>
    .note {
        position: fixed;
        width: 100%;
        top: 0;
        bottom: 0;
    }

    .note-content {
        height: 90%;
        overflow: hidden;
    }

    .article-item {
        border: 1px solid #ffffff;
        border-radius: 5px;
        background-color: #fafafa;
        box-shadow: 5px 1px 1px #cccccc;
        margin: 8px;
        position: relative;
    }

    .image {
        width: 100%;
        height: 120px;
        background-color: #eeeeee;
    }

    .ctime {
        text-align: center;
        color: #aaa;
        margin-top: 25px;
        font-size: 13px;
        background-color: #fff
    }

    .title {
        padding: 10px;
        font-size: 14px;
        font-weight: bold;
    }

    .intro {
        padding: 14px;
        padding-top: 0px;
        font-size: 13px;
        color: #ccc;
        /* white-space:nowrap; */
    }

</style>